<template>
  <div class="app-container">
    <div class="filter-container" style="color:#909399;font-size:14px;">{{posmerchantInfo.name}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="秘钥" prop="jdKey" ref="jdKey">
            <el-input v-model="ruleForm.jdKey"></el-input>
        </el-form-item>
        <el-form-item label="费率" prop="scanRate" ref="scanRate">
            <el-input v-model="ruleForm.scanRate">
              <template slot="append">%</template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="close();">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getMerchantpaychannel, getPosmerchant, addRevDelmerchantpaychannel } from '@/api/api.verify.js'

export default {
  name: 'AliForm',
  data() {
    return {
      posmerchantInfo:{},//门店信息
      fileList:[],//上传列表   
      ruleForm: {
          jdKey:null,//秘钥
          scanRate:null,//费率

          channelId:441,//系统通道id
          channelName:"支付宝官通",//通道名称
          checkStatus:20,//审核状态
          channelType:210,//通道类型
          merchantId:null,//商户id
          whetherHigQulitMerch:20,//表单
      },
      rules: {
          jdKey:[
              {required: true, message: '请输入秘钥', trigger: 'blur'},
          ],
          scanRate:[
              {required: true, message: '请输入费率', trigger: 'blur'},
          ],
      },
    }
  },
  created() {
    this.posmerchantInfo=this.$route.query
    this.getStart();
  },
  methods: {
    getStart() {//初始化
        let _this=this;
        let merchantId=this.posmerchantInfo.id
        this.ruleForm.merchantId=merchantId;
        this.getPosmerchant();
    },
    getPosmerchant(){//商户信息查询
        let data={};
        let _this=this;
        if(this.posmerchantInfo.typeId){
            data.typeId=this.posmerchantInfo.typeId
            getMerchantpaychannel(data).then(d=>{
              _this.ruleForm.jdKey=d.data.jdKey;//秘钥
              _this.ruleForm.scanRate=d.data.scanRate;//费率
            })
        }else{
            data.id=this.posmerchantInfo.id
            getPosmerchant(data,'GET').then(d=>{
              _this.merchantInfo=d.data;
              _this.ruleForm.scanRate=d.data.transRuleType;
            });
        };
    },
    submitForm(formName) {//表单验证
        let _this = this;
        this.$refs[formName].validate((valid,object) => {
            if(valid) {
                _this.getForm()
            }else{
                for (const i in object) {
                    let dom = this.$refs[i]
                    // 这里是针对遍历的情况（多个输入框），取值为数组
                    if (Object.prototype.toString.call(dom) !== '[object Object]') { 
                        dom = dom[0]
                    }
                        // 第一种方法（包含动画效果）
                        dom.$el.scrollIntoView({ // 滚动到指定节点
                        // 值有start,center,end，nearest，当前显示在视图区域中间
                        block: 'center', 
                        // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                        behavior: 'smooth' 
                    });
                    break // 跳出循环了
                }
            }
        });
    },
    getForm() {//提交表单
        let _this=this;
        let data=this.ruleForm;
        let method="POST";
        let msg="添加成功";
        if(this.posmerchantInfo.typeId){
            method="PUT";
            msg="修改成功";
            data.id=this.posmerchantInfo.typeId
        }
        addRevDelmerchantpaychannel(data,method).then(d=>{
          this.$message({
              message: msg,
              type: 'success'
          });
          setTimeout(function(){
            _this.$router.go(-1)
          },2000)
        })
    },
  }
}
</script>

